<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/swiper.css">
  <script src="../js/animate.js"></script>
</head>

<body>
  <!-- .wrap>(ul.swiperBar>li*4>img[src='../images/$.jpg'])+ul.dotBar>li*4 -->
  <div class="wrap w">
    <ul class="swiperBar cl">
      <li><img src="../images/1.jpg" alt=""></li>
      <li><img src="../images/2.jpg" alt=""></li>
      <li><img src="../images/3.jpg" alt=""></li>
      <li><img src="../images/4.jpg" alt=""></li>
      <li><img src="../images/1.jpg" alt=""></li>
    </ul>
    <ul class="dotBar">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script>
  // 轮播图的书写流程
  // 1.  dot点 和 图片 一一对应 (下标)
  // 2.  怎么移动? 轮播时 移动移动整个父盒子(swiperBar)  => 无缝轮播
  // 3.  移动多少? swiperBar移动的距离是一张图片的倍数 => 具体移动多少也和下标对应


  var wrap = document.querySelector(".wrap");
  var swiperBar = document.querySelector(".swiperBar");
  var liList = document.querySelectorAll(".dotBar li");

  var swiperWidth = wrap.clientWidth;

  var index = 0;  //全局变量  记录轮播的下标
  var timer = null;

  // 点击轮播
  /* for(let i=0;i<liList.length;i++){
      let li = liList[i];
      li.onclick = function(){
          // console.log(this,i);

          for(var j=0;j<liList.length;j++){
              liList[j].className = "";
          }
          liList[i].className = "active"

          animate(swiperBar,"left",-swiperWidth*i,"slow");
      }
  }
  */

  // 问题:
  // index超出最大值 如果强制改为0 => 反向滚动到初始位置?   => 用户体验不好

  // 怎么解决?  
  // 障眼法 => 在第四张 之后 添加第五张(同第一张)  => 每次运动完毕(每切换一张),判断是否是第五张,如果是第五张 瞬间切到第一张(ele.style.left = 0)  index = 0;

  // timer = setInterval(function(){
  //     index++;
  //     if(index>=liList.length){ // index>=4
  //         index = 0;
  //     }
  //     console.log(index);
  //     for(var j=0;j<liList.length;j++){
  //         liList[j].className = "";
  //     }
  //     liList[index].className = "active";
  //     animate(swiperBar,"left",-swiperWidth*index,"slow");
  // },3000)

  timer = setInterval(function () {
    index++;
    // if(index>=liList.length){ // index>=4
    //     index = 0;
    // }
    console.log(index);
    for (var j = 0; j < liList.length; j++) {
      liList[j].className = "";
    }
    liList[index >= liList.length ? 0 : index].className = "active";
    animate(swiperBar, "left", -swiperWidth * index, "slow", function () {
      // 此回调函数 每次运动结束之后执行
      // 判断 如果是第五张 瞬间切换到第一张
      console.log("每次运动结束之后执行:", index);
      if (index >= liList.length) {
        swiperBar.style.left = 0;
        index = 0;
      }
    });
  }, 3000)


</script>

</html>